import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import store from "./store";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

// console.log(import.meta.env);
// vite中获取环境变量

// 小tips 可用可不用
// 注册全局指令api
// 这就不需要每个页面都引入api文件了
import api from "./api";
import storage from "./utils/storage";
const app = createApp(App);

// 全局自定义指令
app.directive("has", {
  // 操作节点
  beforeMount: (el, binding) => {
    // el=>当前使用自定义指令的节点
    // binding 传递参数
    // el 新增按钮 binding 拿到
    // 通过binding 循环遍历 actionList
    let actionList = storage.getItem("actionList");
    let value = binding.value;
    // 如果元素中和binding有相同=> 有权限
    let permission = actionList.includes(value);
    // 如果没有找到=》没有权限=》el.style el.remove
    if (!permission) {
      // 说明按钮不应该显示
      el.style = "display:none";
      setTimeout(() => {
        el.parentNode.removeChild(el);
      });
    }
  },
});

// 在属性前+$ 代表属性是程序员自己添加的 非系统自带的
app.config.globalProperties.$api = api;
// 全局引入element icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
// 1.引入整个文件夹
import QueryForm from "./packages/QueryForm";
// 2.use()
app.use(ElementPlus).use(QueryForm).use(store).use(router).mount("#app");

// 今天的目标：把按钮权限和菜单权限做完整
// 1.按钮权限
// step1 根据后台返回的permissionList接口，返回actionList
//       这个数组里面存在元素字符，代表当前用户按钮权限
// 1.1 因为这个数据很多地方都要用到，所以先把这个数据放在vuex
// 1.2 通过设置自定义指令，控制按钮是否出现

// 2. 菜单权限
//    2.1
